<template>
  <el-row type="flex" justify="center" align="middle">
    <el-table
      :data="recent_insects_info"
      style="width: 100%"
      max-height="500px"
      :default-sort="{prop: 'last_update_time', order: 'descending'}"
    >
      <el-table-column
        prop="last_update_time"
        label="上次更新日期"
        sortable
        width="300"
        align="center"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.last_update_time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="greenhouse_tag"
        label="棚区"
        sortable
        width="80"
        align="center"
      />
      <el-table-column
        prop="address"
        label="地址"
        sortable
        width="300"
        align="center"
      />
      <el-table-column
        label="虫群总量"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="(scope.row.insects_total > 30000)?'danger':'success'">{{ scope.row.insects_total }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="insects_total"
        label="风险评级"
        align="center"
      />
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-popover
              width="400"
              trigger="click"
            >
              <el-table
                :data="single_board_info"
                max-height="450"
                :default-sort="{prop: 'board', order: 'ascending'}"
              >
                <el-table-column width="150" label="虫板" property="board" sortable>
                  <template slot-scope="scope">
                    <el-tag size="medium" type="warning">{{ scope.row.board }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column width="100" label="飞虱" property="飞虱" sortable>
                  <template slot-scope="scope">
                    <el-tag size="medium" :type="(scope.row.飞虱>500)?'danger':'success'">{{ scope.row.飞虱 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column width="100" label="蓟马" property="蓟马" sortable>
                  <template slot-scope="scope">
                    <el-tag size="medium" :type="(scope.row.蓟马>500)?'danger':'success'">{{ scope.row.蓟马 }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
              <el-button slot="reference" type="primary" icon="el-icon-search" @click="showDetail(scope.$index, scope.row)" />
            </el-popover>
            <el-button type="primary" icon="el-icon-share" />
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            />
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</template>
<script>
import { query_recent_insects_info, update_insects_info } from '@/api/remote-search'

export default {
  name: 'InsectsInfoTable',
  data() {
    return {
      recent_insects_info: [],
      single_board_info: [{
        board: '加载中...',
        飞虱: '加载中...',
        蓟马: '加载中...'
      }]
    }
  },
  mounted() {
    this.getRecentInsectsInfo()
  },
  methods: {
    formatter(row, column) {
      return row.address
    },
    getRecentInsectsInfo() {
      query_recent_insects_info().then(res => {
        this.recent_insects_info = res.data
        // console.log(res.data)
      })
    },
    showDetail(index, row) {
      // console.log(row.each_board_info)
      this.single_board_info = row.each_board_info
      return this.$emit('getSelectedInsectsInfo', row)
    },
    handleDelete() {
      this.$message({
        message: '请联系开发人员获取相关权限',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>

</style>
